<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { useSnackbarStore } from '@/store/snackbarStore';
import { getInitialVisitRecords } from '@/api/initialVisitor';

interface IVisitRecord {
  id: number;
  appointment_id: number;
  visitor_id: number;
  type: string;
  visit_time: string;
  risk_level: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
  problem_type: string;
  conclusion: string;
  note: string;
  student_name: string;
}

const itemsPerPage = ref(10);
const visitRecords = ref<IVisitRecord[]>([]);
const loading = ref(true);
const snackbarStore = useSnackbarStore();

// 笔记弹窗相关
const noteDialog = ref(false);
const noteContent = ref('');
function openNoteDialog(note: string) {
  noteContent.value = note;
  noteDialog.value = true;
}

// 表格列定义
const headers = reactive([
  { title: '预约ID', key: 'appointment_id', width: '100px' },
  { title: '学生姓名', key: 'student_name', width: '120px' },
  { title: '危机等级', key: 'risk_level', width: '100px' },
  { title: '问题类型', key: 'problem_type', width: '150px' },
  { title: '初访结论', key: 'conclusion', width: '150px' },
  { title: '笔记', key: 'note', width: '100px' }
]);

// 获取危机等级显示文本
const getRiskLevelText = (riskLevel: string) => {
  const riskMap: Record<string, string> = {
    'LOW': '低',
    'MEDIUM': '中',
    'HIGH': '高',
    'CRITICAL': '严重'
  };
  return riskMap[riskLevel] || riskLevel;
};

// 获取危机等级颜色
const getRiskLevelColor = (riskLevel: string) => {
  const colorMap: Record<string, string> = {
    'LOW': 'success',
    'MEDIUM': 'warning',
    'HIGH': 'error',
    'CRITICAL': 'error'
  };
  return colorMap[riskLevel] || 'default';
};



// 加载初访记录数据
const loadVisitRecords = async () => {
  loading.value = true;
  try {
    const response = await getInitialVisitRecords();
    console.log('获取初访记录响应:', response);
    
    if (response.data && response.data.code === 200 && response.data.data) {
      visitRecords.value = response.data.data;
    } else {
      console.error('Invalid response format:', response);
      visitRecords.value = [];
    }
  } catch (error) {
    console.error('Error loading visit records:', error);
    snackbarStore.showMessage('加载初访记录失败');
    visitRecords.value = [];
  } finally {
    loading.value = false;
  }
};

// 刷新数据
const handleRefresh = () => {
  loadVisitRecords();
};

// 组件挂载时加载数据
onMounted(() => {
  loadVisitRecords();
});
</script>

<template>
  <section>
    <VRow>
      <VCol cols="12">
        <VCard>
          <VCardItem class="py-0">
            <VToolbar tag="div" color="transparent" flat>
              <VToolbarTitle>初访记录</VToolbarTitle>
              <VSpacer />
              <VBtn icon @click="handleRefresh" density="comfortable">
                <VIcon>mdi-refresh</VIcon>
                <VTooltip activator="parent">刷新数据</VTooltip>
              </VBtn>
            </VToolbar>
          </VCardItem>
          
          <!-- 数据表格 -->
          <VCardText class="pa-0 pb-5">
            <VDivider />
            <VDataTable
              :headers="headers"
              :items="visitRecords"
              v-model:items-per-page="itemsPerPage"
              :loading="loading"
              hover
              class="elevation-1"
            >
              <!-- 预约ID列 -->
              <template #item.appointment_id="{ item }">
                {{ item.appointment_id }}
              </template>
              
              <!-- 学生姓名列 -->
              <template #item.student_name="{ item }">
                {{ item.student_name || '未知' }}
              </template>
              
              <!-- 危机等级列 -->
              <template #item.risk_level="{ item }">
                <VChip :color="getRiskLevelColor(item.risk_level)" size="small">
                  {{ getRiskLevelText(item.risk_level) }}
                </VChip>
              </template>
              
              <!-- 问题类型列 -->
              <template #item.problem_type="{ item }">
                {{ item.problem_type }}
              </template>
              
              <!-- 初访结论列 -->
              <template #item.conclusion="{ item }">
                <VChip 
                  :color="item.conclusion === '建议心理咨询' ? 'primary' : 'success'" 
                  size="small"
                >
                  {{ item.conclusion }}
                </VChip>
              </template>
              
              <!-- 笔记列 -->
              <template #item.note="{ item }">
                <VBtn size="small" variant="text" @click="openNoteDialog(item.note)">查看</VBtn>
              </template>
            </VDataTable>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>

    <!-- 笔记悬浮窗 -->
    <VDialog v-model="noteDialog" max-width="500px">
      <VCard>
        <VCardTitle>完整笔记</VCardTitle>
        <VCardText>
          <pre style="white-space: pre-wrap;">{{ noteContent }}</pre>
        </VCardText>
        <VCardActions>
          <VSpacer />
          <VBtn color="primary" @click="noteDialog = false">关闭</VBtn>
        </VCardActions>
      </VCard>
    </VDialog>
  </section>
</template>

<style scoped>
.elevation-1 {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style> 